<template>
  <div class="container con-padding my-team">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar title="我的团队"
      left-icon="left" @clickLeft="back" />
    <div class="my-team-card-padding div-sizing">
      <div class="my-team-card img-s-h">
        <div class="my-team-card-div div-sizing">
          <div class="all_title">
            <img src="../../assets/mine/team/people.png" alt="">
          </div>
          <div class="all_people">
            <span>{{ user.team }}</span>
            <span style="color:#A7ABA8">人</span>
          </div>

          <div class="all_have">
            <span style="color:#A7ABA8">团队有效会员:</span>

            <span>{{ user.td_qdyx_num }}</span>
          </div>

          <div class="all_switch">
            <u-switch v-model="checked" activeColor="#80BD7F" size="20" @change="change"></u-switch>
          </div>
        </div>
      </div>
    </div>
    <view class="u-flex u-ju-around" style="margin-bottom: 60rpx;">
      <view :class="active == index ?'van-tab--active':'van-tab'" v-for="(item,index) in list1" :key="index"
        @click="changeBtn(index)">
        {{item.name}}
      </view>
    </view>
    <view class="" v-if="active == 0">
      <div v-for="(item,index) in list" :key="index" class="user-item div-sizing" v-if="item.is_qd != numHaha">
        <div class="flex-between-center home-top-user div-sizing">
          <div class="home-top-img">
            <img :src="item.avatar" alt="" class="img-s-h">
          </div>
          <div class="flex-between-center home-top-l-r">
            <div class="home-top-leve">
              <div class="van-ellipsis">
                {{ item.user }}
              </div>
              <img :src="item.level" alt="" class="user-level">
            </div>
            <div class="home-phone">
              {{ item.tel }}
              <!-- <span v-if="item.sta_buy == 1">({{item.sta_buy | fixSta}})</span> -->
            </div>
          </div>
          <div class="flex-between-center user-line time_cont1">
            <span>注册ip:</span>
            <span class="font-family-din van-ellipsis">{{ item.register_ip }}</span>
          </div>
          <div class="flex-between-center user-line time_cont">
            <span>注册时间:</span>
            <span class="font-family-din van-ellipsis">{{ item.create_time }}</span>
          </div>
          <!-- <img :src="item.level" alt="" class="user-level-img"> -->
        </div>
        <div class="flex-between-center user-info-div">
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">个人资产</span>
            <span class="font-family-din van-ellipsis">{{ item.reward_census }}</span>
          </div>
          <div class="shu" />
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">有效直推</span>
            <span class="font-family-din van-ellipsis">{{ item.zt_qdyx_num }}</span>
          </div>
          <div class="shu" />
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">团队资产</span>
            <div style="text-align:right;width:75%">
              <span class="font-family-din van-ellipsis">{{ item.team_reward }}</span>
            </div>
          </div>
        </div>
      </div>
    </view>
    <view class="" v-if="active == 1">
      <div v-for="(item,index) in list" :key="index" class="user-item div-sizing" v-if="item.is_qd != numHaha">
        <div class="flex-between-center home-top-user div-sizing">
          <div class="home-top-img">
            <img :src="item.avatar" alt="" class="img-s-h">
          </div>
          <div class="flex-between-center home-top-l-r">
            <div class="home-top-leve">
              <div class="van-ellipsis">
                {{ item.user }}
              </div>
              <img :src="item.level" alt="" class="user-level">
            </div>
            <div class="home-phone">
              {{ item.tel }}
            </div>
          </div>
          <div class="flex-between-center user-line time_cont1">
            <span>注册ip:</span>
            <span class="font-family-din van-ellipsis">{{ item.register_ip }}</span>
          </div>
          <div class="flex-between-center user-line time_cont">
            <span>注册时间:</span>
            <span class="font-family-din van-ellipsis">{{ item.create_time }}</span>
          </div>
        </div>
        <div class="flex-between-center user-info-div">
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">个人资产</span>
            <span class="font-family-din van-ellipsis">{{ item.reward_census }}</span>
          </div>
          <div class="shu" />
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">有效直推</span>
            <span class="font-family-din van-ellipsis">{{ item.zt_qdyx_num }}</span>
          </div>
          <div class="shu" />
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">团队资产</span>
            <div style="text-align:right;width:75%">
              <span class="font-family-din van-ellipsis">{{ item.team_reward }}</span>
            </div>
          </div>
        </div>
      </div>
    </view>
    <view class="" v-if="active ==2">
      <div v-for="(item,index) in list" :key="index" class="user-item div-sizing" v-if="item.is_qd != numHaha">
        <div class="flex-between-center home-top-user div-sizing">
          <div class="home-top-img">
            <img :src="item.avatar" alt="" class="img-s-h">
          </div>
          <div class="flex-between-center home-top-l-r">
            <div class="home-top-leve">
              <div class="van-ellipsis">
                {{ item.user }}
              </div>
              <img :src="item.level" alt="" class="user-level">
            </div>
            <div class="home-phone">
              {{ item.tel }}
            </div>
          </div>
          <div class="flex-between-center user-line time_cont1">
            <span>注册ip:</span>
            <span class="font-family-din van-ellipsis">{{ item.register_ip }}</span>
          </div>
          <div class="flex-between-center user-line time_cont">
            <span>注册时间:</span>
            <span class="font-family-din van-ellipsis">{{ item.create_time }}</span>
          </div>
        </div>
        <div class="flex-between-center user-info-div">
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">个人资产</span>
            <span class="font-family-din van-ellipsis">{{ item.reward_census }}</span>
          </div>
          <div class="shu" />
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">有效直推</span>
            <span class="font-family-din van-ellipsis">{{ item.zt_qdyx_num }}</span>
          </div>
          <div class="shu" />
          <div class="flex-between-center user-line">
            <span style="color:#8B8B8B">团队资产</span>
            <div style="text-align:right;width:75%">
              <span class="font-family-din van-ellipsis">{{ item.team_reward }}</span>
            </div>
          </div>
        </div>
      </div>
    </view>
  </div>
</template>

<script>
  import {
    getTeamList
  } from '@/api/index.js'
  export default {
    filters: {
      fixSta(val) {
        return val == 1 ? '未打款' : ''
      }
    },
    data() {
      return {
        list1: [{
          id: 0,
          name: '一级'
        }, {
          id: 1,
          name: '二级'
        }, {
          id: 2,
          name: '三级'
        }],
        numHaha: 3,
        checked: false,
        is_pay: false,
        team: 0, // 人数
        yx_team: 0,

        active: 0,
        page: 1,
        list: [], // 来源
        loading: false,
        finished: false,
        refreshing: false,
        error: false,
        isFixed: false,
        user: {
          username: '',
          indirect_push_sum: 0,
          yx_team: 0,
          team: 0, // 人数
          push_sum: 0,
          share_url: '',
          superior: ''
        }
      }
    },
    watch: {
      active() {
        this.onRefresh()
      },
      checked(val) {
        console.log(val, 1231687);
        if (val) {
          this.numHaha = 0
        } else {
          this.numHaha = 3
        }
        // this.onRefresh()
      },
      is_pay() {
        this.onRefresh()
      }
    },
    onLoad() {
      this.get_list()
    },
    methods: {
      changeBtn(index) {
        this.active = index
      },
      back() {
        uni.navigateBack()
      },
      get_list() {
        this.$ui.loading('加载中')
        const vm = this
        if (vm.refreshing) {
          vm.list = []
          vm.page = 1
          vm.refreshing = false
        }
        let status = 0
        if (vm.checked) {
          status = 1
        }
        let is_pay = 0
        if (vm.is_pay) {
          is_pay = 1
        }
        // let type = 1
        // if (vm.active === 1) {
        //   type = 4
        // }
        getTeamList({
          page: vm.page,
          type: vm.active + 1,
          status: 0,
          is_pay: is_pay
        }).then(res => {
          uni.hideLoading()
          vm.loading = false
          if (res.code === 1) {
            // if(vm.checked){
            //   vm.team = res.data.yx_team
            // }else{
            //   vm.team = res.data.team
            // }
            vm.user = res.data
            // vm.team = res.data.team
            // vm.yx_team = res.data.yx_team
            const list = res.data.list
            vm.list = [...vm.list, ...list]
            if (res.data.pages > vm.page) {
              vm.page++
            } else {
              vm.finished = true
            }
          } else {
            vm.error = true
          }
        }, () => {
          vm.loading = false
          vm.error = true
        })
      },
      // 下拉刷新
      onRefresh() {
        this.finished = false
        this.refreshing = true
        this.loading = true
        this.get_list()
      },
      tabScroll(e) {
        if (e.isFixed) {
          this.isFixed = true
        } else {
          this.isFixed = false
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .my-team {
    // card info
    // background: url('~assets/mine/my-team-bg.png') no-repeat;
    // background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    .header-back {
      line-height: 120rpx;
      padding: 40rpx 30rpx 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 11;

      .van-icon {
        color: #282828;
        font-size: 32rpx;
      }
    }

    .my-team-card-padding {
      height: 400rpx;
      padding-top: 140rpx;
      width: 100%;
      overflow: initial;

      .team-top-bg {
        width: 100%;
        height: auto;
        min-height: 430rpx;
        position: absolute;
        top: 0;
        left: 0;
        background: #282828;
      }

      .my-team-card {
        z-index: 2;
        padding: 0 0 20rpx;
        box-sizing: border-box;

        .my-team-card-div {
          margin: 0 auto 20rpx;
          width: 741rpx;
          height: 209rpx;
          padding: 0 40rpx;
          font-size: 24rpx;
          position: relative;
          box-sizing: border-box;
          background: url("~assets/mine/team/banner2.png") no-repeat;
          background-size: 100% auto;

          .all_title {
            top: 60rpx;
            left: 89rpx;
            position: absolute;
            width: 107rpx;
            height: 35rpx;

            img {
              width: 107rpx;
            }
          }

          .all_people {
            position: absolute;
            top: 114rpx;
            left: 90rpx;

            span {
              font-size: 0.5rem;
            }
          }

          .all_have {
            position: absolute;
            top: 113rpx;
            left: 278rpx;

            span {
              font-size: 0.37;
            }
          }

          .all_switch {
            position: absolute;
            top: 108rpx;
            right: 156rpx;
          }
        }

        .team-top-info {
          .team-top-left {
            justify-content: flex-start;

            .info-avatar {
              width: 112rpx;
              height: 112rpx;
              margin-right: 18rpx;
            }

            .team-info-div {
              .info-name {
                display: flex;
                align-items: center;
                font-size: 32rpx;
                margin-bottom: 22rpx;
              }

              .info-level {
                width: auto;
                height: 32rpx;
                margin-left: 20rpx;
              }

              .info-up {
                color: rgba(#ffffff, 0.5);
              }
            }
          }

          .vant-btn {
            margin: 0;

            .van-button {
              width: 150rpx;
              height: 48rpx;
              line-height: 48rpx;
              padding: 0;
              font-size: 24rpx;
              border-radius: 26rpx;
            }
          }
        }

        .my-team-top {
          font-size: 32rpx;
          color: #ffffff;
          font-weight: bold;
          margin-bottom: 20rpx;

          .my-team-logo {
            width: 120rpx;
            height: 120rpx;
            margin-right: 18rpx;
          }

          .my-team-top-right {
            flex: 1;
          }

          .top-title {
            // margin-bottom: 10rpx;
            font-weight: bold;
            font-size: 36rpx;

            &>div:last-child {
              font-size: 28rpx;
            }
          }

          .my-team-top-right-btm {
            margin-top: 14rpx;

            .top-btm-name {
              // color: rgba(#282828,.5);
              font-size: 36rpx;
            }

            .top-btm-name1 {
              // color: rgba(#282828,.5);
              font-size: 24rpx;
            }
          }

          .top-btm-right {
            flex: 1;
            font-size: 50rpx;
            margin-left: 0rpx;

            span:last-child {
              font-size: 24rpx;
              margin-left: 16rpx;
            }
          }

          .top-btm-right1 {
            flex: 1;
            font-size: 40rpx;
            margin-left: 10rpx;

            span:last-child {
              font-size: 24rpx;
              margin-left: 16rpx;
            }
          }

          .vant-btn {
            margin: 0;

            .van-button {
              width: 150rpx;
              height: 48rpx;
              line-height: 48rpx;
              padding: 0;
              font-size: 24rpx;
              background: #d1af40;
              border-radius: 26rpx;
            }
          }
        }

        // .my-team-btm{
        //   width: 100%;
        //   position: absolute;
        //   bottom: 0;
        //   left: 0;
        //   .my-team-item{
        //     width: 25%;
        //     text-align: center;
        //     .item-name{
        //       color: #B5B9BC;
        //       margin-bottom: 20rpx;
        //     }
        //     .item-number{
        //       font-size: 28rpx;
        //     }
        //   }
        // }
        .team-card {
          // background: #3A9B13;
          position: relative;
          padding: 30rpx 200rpx 30rpx 30rpx;
          justify-content: flex-start;
          overflow: initial;
          border-radius: 0;
          // background: url("~assets/mine/team-card-bg.png") no-repeat;
          // background-size: 100% 100%;
          background: #282828;

          &::after {
            content: "";
            width: 630rpx;
            height: 16rpx;
            position: absolute;
            bottom: -16rpx;
            left: 50%;
            transform: translateX(-50%);
            background: #929292;
            box-shadow: rgba(#000000, 0.16) 0 12rpx 24rpx -12rpx;
          }

          .card-item {
            min-width: 50%;
            height: 134rpx;
            align-items: flex-start;
            flex-direction: column;

            .item-title {
              color: rgba(#ffffff, 0.8);
            }

            .item-number {
              color: #ffffff;
              font-size: 50rpx;
            }

            .item-number1 {
              font-size: 32rpx;
            }
          }

          .van-button {
            width: 152rpx;
            height: 60rpx;
            line-height: 60rpx;
            padding: 0;
            font-size: 28rpx;
            border-radius: 0;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
          }
        }

        .my-team-btm {
          width: 100%;
          height: 110rpx;
          padding: 0 30rpx 0 24rpx;
          border-radius: 20rpx 20rpx 0 0;
          background: #282828;
          background: url("~assets/mine/my-team-btm-bg.png") no-repeat;
          background-size: 100% 100%;

          .my-team-btm-left {
            color: #ffffff;

            .my-team-tag-img {
              width: 40rpx;
              height: 40rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }

    .no-list {
      position: absolute;
      top: 760rpx;
      left: 50%;
      transform: translateX(-50%);
      flex-direction: column;
      z-index: 4;

      .team-none-img {
        width: 164rpx;
        height: 164rpx;
      }

      span {
        color: #dcdcdc;
      }
    }

    .user-title {
      font-size: 32rpx;
      padding: 42rpx 40rpx 30rpx;
    }

    .van-tabs {
      flex: 1;
      z-index: 3;
      margin-top: -40rpx;
      background: #ffffff;
      border-radius: 40rpx 40rpx 0 0;
    }

    // 下级
    .van-list {
      z-index: -1;
      padding: 0 40rpx 20rpx;
      margin-top: 40rpx;
    }

    .user-item {
      position: relative;
      margin: 0 auto 60rpx;
      width: 640rpx;
      height: 175rpx;
      font-size: 24rpx;
      border-radius: 30rpx;
      box-shadow: 0 0 30rpx rgba(#000000, 0.16);
      background: #ffffff;

      .home-top-img {
        position: absolute;
        top: -40rpx;
        left: 40rpx;
        width: 80rpx;
        height: 80rpx;
        background: #f5f5f5;
        border-radius: 50%;
        overflow: hidden;
      }

      .home-top-user {
        color: #282828;
        background: none;
        position: relative;

        .user-level-img {
          height: 32rpx;
          width: auto;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }

        .home-top-l-r {
          flex: 1;
          flex-direction: column;
          align-items: flex-start;
        }
      }

      .home-top-leve {
        position: absolute;
        top: 55rpx;
        left: 24rpx;
        font-size: 28rpx;
        color: #000000;
        font-weight: 700;

        .user-level {
          width: auto;
          height: 30rpx;
          margin-left: 10rpx;
        }
      }

      .home-phone {
        position: absolute;
        top: 81rpx;
        left: 24rpx;
        display: flex;
        align-items: center;

        span {
          color: #ff0000;
          margin-left: 10rpx;
        }
      }

      .time_cont1 {
        position: absolute;
        top: 126rpx;
        left: 24rpx;
        color: #AFAFAF;
        font-size: 15rpx;
      }

      .time_cont {
        position: absolute;
        top: 126rpx;
        left: 259rpx;
        color: #AFAFAF;
        font-size: 15rpx;
      }

      .user-info-div {
        position: absolute;
        top: 50rpx;
        right: 0;
        width: 60%;
        border-radius: 20rpx;
        margin-top: 10rpx;
        justify-content: space-around;
        align-items: center;

        // background: rgba(#ffffff, 1);
        .shu {
          width: 1rpx;
          height: 39rpx;
          background: #E4E4E4;
        }

        .user-info-line {
          margin-bottom: 10rpx;

          &:last-child {
            margin: 0;
          }

          .line-item {
            display: flex;
            align-items: center;

            .item-title {
              font-size: 24rpx;
              // color: rgba(#282828, 0.7);
            }

            .item-num {
              max-width: 160rpx;
              font-size: 26rpx;
              // color: #282828;
              margin-left: 10rpx;
              display: inline-block;
            }

            .item-num1 {
              max-width: 320rpx;
            }
          }
        }

        .user-line {
          // width: 33.3%;
          flex: 1;
          align-items: center;
          flex-direction: column;
          font-size: 24rpx;

          span:last-child {
            // margin-top: 32rpx;
            // padding: 0 16rpx;
          }
        }

        .user-line:first-child {
          align-items: flex-start;
        }

        .user-line:nth-child(4) {
          align-items: flex-end;
        }

        // .user-line:nth-child(even) {
        //   margin-top: 20rpx;
        // }
      }
    }
  }
</style>
<style lang="less">
  .my-team {
    .van-tabs__wrap {
      height: 60rpx;
      // padding: 0 110rpx;
    }

    .van-tabs__nav {
      justify-content: space-between;
      align-items: center;
    }

    .van-tab {
      width: 132rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 10rpx;
      color: #282828;
      background: #f2f2f2;
      text-align: center;
    }

    .van-tab--active {
      width: 132rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 10rpx;
      color: #282828;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(to right, #93D092, #80BD7F);
      text-align: center;
    }

    .van-tabs__line {
      height: 2rpx;
      background: #5d5d5d;
      display: none;
    }

    .van-sticky {
      margin-bottom: 20rpx;
      padding: 30rpx 50rpx 0;
      border-radius: 40rpx 40rpx 0 0;
    }

    .van-sticky--fixed {
      top: 2rem;
      padding: 0 40rpx;
    }
  }
</style>
